<template>
    <div class="appreciate-box" v-if="selectedParentColumn && selectedParentColumn.name === '典藏鉴赏'">
        <div class="appreciate-title" style="margin-top: 50px;">{{ selectedParentColumn.name }}</div>
        
        <div class="appreciate-content">
            <div class="appreciate-detail">
             
                    <div v-for="(child, index) in childrenColumns.slice(0, 1)" :key="index"
                        @click="selectTab(child.columnId)">
                    </div>
        
                <div class="appreciate-tab-content">
                    <div class="appreciate-article-list">
                        <div v-for="article in articleList.slice(0, 3)" :key="article.articleId"
                            class="appreciate-article-item">
                            <div class="appreciate-article-content">
                                <img :src="article.coverImageUrl" alt="" class="article-image">
                                <p  class="article-resume">{{ article.resume }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { defineComponent, ref, onMounted } from 'vue';
import { getArticleListService, getChildrencolumnsService, getParentColumnsService } from '@/api/user.js';

export default defineComponent({
    name: 'Appreciation',
    setup() {
        const selectedParentColumn = ref(null);
        const childrenColumns = ref([]);
        const articleList = ref([]);
        const items = ref([]); // For the swiper items
        const loading = ref(false);
        const selectedChildColumnId = ref(null);

        // 获取父级栏目信息
        const fetchParentColumn = async () => {
            try {
                const response = await getParentColumnsService(null); // 假设 pid 为 null 表示获取顶级栏目
                const appreciationColumn = response.data.find(column => column.name === '典藏鉴赏');
                if (appreciationColumn) {
                    selectedParentColumn.value = appreciationColumn;
                    await fetchChildrenColumns(appreciationColumn.columnId);
                }
            } catch (error) {
                console.error('获取父栏目失败:', error);
            }
        };

        // 获取子栏目信息
        const fetchChildrenColumns = async (parentId) => {
            try {
                const response = await getChildrencolumnsService(parentId);
                childrenColumns.value = response.data;
                if (childrenColumns.value.length > 0) {
                    selectedChildColumnId.value = childrenColumns.value[0].columnId;
                    await fetchArticleList(selectedChildColumnId.value);
                }
            } catch (error) {
                console.error('获取子栏目失败:', error);
            }
        };

        // 获取文章列表
        const fetchArticleList = async (childColumnId) => {
            articleList.value = [];
            loading.value = true;
            try {
                const response = await getArticleListService({
                    subColumnId: childColumnId,
                    parentColumnId: selectedParentColumn.value?.columnId,
                    state: '已发布'
                });
                articleList.value = response.data || [];
            } catch (error) {
                console.error('Failed to fetch articles:', error);
            } finally {
                loading.value = false;
            }
        };

    

        const selectTab = async (childColumnId) => {
            selectedChildColumnId.value = childColumnId;
            await fetchArticleList(childColumnId);
        };

        onMounted(() => {
            fetchParentColumn();
          
        });

        return {
            selectedParentColumn,
            childrenColumns,
            articleList,
            items,
            loading,
            selectTab,
            selectedChildColumnId
        };
    }
});
</script>
  
<style scoped>
.appreciate-box {
    width: 100%;
    max-width: 120rem;
    padding-bottom: 7rem;
    margin-top: 6rem;
}

.appreciate-title {
    width: 100%;
    height: 6.25rem; /* 100px */
    font-weight: bold;
    font-size: 2rem;
    color: #111111;
    text-align: center;
    line-height: 6.25rem; /* 对齐文本到中间 */
}

.appreciate-content {
    display: flex;
    flex-direction: column;
}

.appreciate-detail {
    display: flex;
    justify-content: space-between;
}

.appreciate-tab.active {
    background-color: #f0f0f0;
}

.appreciate-tab-content {
    width: 100%;
    padding: 1rem;
   
}

.appreciate-article-list {
    display: flex;
    gap: 3.5rem; /* 使用相对单位 */
    padding: 0.5rem;
}

.appreciate-article-item {
    flex: 0 0 auto;
    min-width: calc(33.333% - 1.5rem); /* 减去两边的间隙 */
    max-width: calc(33.333% - 1.5rem); /* 减去两边的间隙 */
    border: 0.0625rem solid #ddd;
    padding: 1rem;
    box-sizing: border-box;
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
}

.appreciate-article-item:hover {
    transform: scale(1.05);
}

.article-image {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.article-resume {
    margin-top: 1rem;
    font-size: 1rem;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .appreciate-article-list {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .appreciate-article-item {
        min-width: calc(50% - 1rem); /* 在较小屏幕上每行显示两个项目 */
        max-width: calc(50% - 1rem);
    }
}

@media (max-width: 480px) {
    .appreciate-article-list {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .appreciate-article-item {
        min-width: 100%; /* 在非常小的屏幕上每行只显示一个项目 */
        max-width: 100%;
    }
}
</style>

